<!DOCTYPE html>
<html>

<head>
    <title> Conditional Rendering</title>
    <script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js" crossorigin></script>
</head>

<body>
    <div id="root"></div>
</body>

</html>
<script type="text/babel">
    function LoginButton(props) {
        return (
            <button onClick={props.onClick}>Login</button>
        );
    }
    function LogoutButton(props) {
        return (
            <button onClick={props.onClick}>Logout</button>
        )
    }
    class LoginControl extends React.Component {
        constructor(props) {
            super(props);
            this.state = { isLoginedIn: false, };
            this._handleLoginClick = this.handleLoginClick.bind(this);
            this._handleLoginoutClick = this.handleLoginoutClick.bind(this);
        }

        handleLoginClick() {
            this.setState({
                isLoginedIn: true,
            })
        }

        handleLoginoutClick() {
            this.setState({
                isLoginedIn: false,
            })
        }

        // Way 4 : Inline If-Else with Conditional Operator
        // https://codepen.io/gaearon/pen/Xjoqwm?editors=0010
        render() {
            return (
                <div>
                    <p>TBD : This P not changed when render() invoked.</p>
                    {this.state.isLoginedIn
                        ? <LogoutButton onClick={this._handleLoginoutClick} />
                        : <LoginButton onClick={this._handleLoginClick} />
                    }
                </div>
            );
        }
    }
    ReactDOM.render(<LoginControl />, document.getElementById('root'));
</script>